<script setup>
import {userInfoStore}from "../stores/UserInfoPinaStores.js";
import { ref ,reactive} from 'vue';
import {useRouter} from 'vue-router';
//导入axios
import request  from "../axios/axios";

//使用
let  routerss= useRouter();
let user= userInfoStore()

//定义变量
//用户名变量
let uName=ref(user.getUserName);
//旧密码变量
let uOldPwd=ref("");
//旧密码标志位
let uOldFlag=false;
//新密码
let uNewPwd=ref("");
//新的重复密码
let uReNewPwd=ref("")

//提示框文本

let uNameShow=ref(user.getUserName);
//旧密码提示框文本变量
let uOldPwdShow=ref("");
//新密码提示框文本变量
let uNewPwdShow=ref("");
//新的重复密码提示框文本变量
let uReNewPwdShow=ref("")

//检查密码格式
function checkUserPwd(password){
   //定义密码格式的正则表达式
   var userPwdReg=/^[1-9a-zA-Z]{1}[0-9a-zA-Z]{5,15}$/;
   if(userPwdReg.test(password)){
      return true;
   }else{
      return false;
   }
   
}

//检查旧密码是否正确
async function checkUserOldPwd(){
   
   if(checkUserPwd(uOldPwd.value)){
      uOldPwdShow.value="OK"
      //使用axios判断旧的密码是否正确
      let {data} = await request.get("/checkOldPwd",
      {
         params:{
            username:uName.value,
            userpassword:uOldPwd.value
         }
      })
      console.log(data)
      

      //根据相应状态码判断旧密码是否正确
      if(data.statusCode== 203){
         //密码正确
         uOldPwdShow.value="OK"
         uOldFlag=true;
         return true;
      }else{
         //密码不正确
         uOldPwdShow.value=data.message;
         return false;
      }


      

   }else{
      uOldPwdShow.value="密码格式不对"
   }
}
//检查新密码
function checkNewPwd(){
   if(checkUserPwd(uNewPwd.value)){
      uNewPwdShow.value="OK";
      return true;
   }else{
      uNewPwdShow.value="密码格式不对"
      return false;
   }

}
//检查两次新密码是否一致
 function chechUserRePwd(){
   
   if(uNewPwd.value==uReNewPwd.value){
      uReNewPwdShow.value="Ok";
      return true;
      
   }else{
      uReNewPwdShow.value="密码不一致";
      return false;
   }

}

//提交请求
async function send(){
   if(chechUserRePwd() &&  checkNewPwd() &&  uOldFlag){
      //发送数据
      let {data} = await request.get("/alterUserPwd"
         ,
         {
            params:{
               username:uName.value,
               userpassword:uReNewPwd.value
            }
         }
      )

      if(data.statusCode==204){
         alert(data.message);
         //退出登录
         user.$reset();
         routerss.push("/login")
      }else{
         alert(data.message);
      }
   }else{
      alert("请检查输入的是否正确")
   }
}

</script>

<template>
   <div class="tb_content">
      <table style="width: 100%; height: 60%;">
      <tr class="trb">
         <td class="name"></td > <td class="right">修改密码</td>
      </tr>
      <tr class="trb">
         <td class="name">输入用户名</td ><td><input type="text" readonly @blur="" class="inputStyle"  v-model="uNameShow" /><span ></span></td>
      </tr>
    

      <tr class="trb">
         <td class="name">输入旧密码</td > <td><input type="password" @blur="checkUserOldPwd()" class="inputStyle" v-model="uOldPwd" /><span v-text="uOldPwdShow"></span></td>
      </tr>

      <tr class="trb">
         <td class="name">输入新密码</td > <td><input type="password" @blur="checkNewPwd()" class="inputStyle" v-model="uNewPwd"  /><span v-text="uNewPwdShow"></span></td>
      </tr>


      <tr class="trb">
         <td class="name">重复新密码</td > <td><input type="password" @blur="chechUserRePwd()" class="inputStyle" v-model="uReNewPwd" /><span v-text="uReNewPwdShow"></span></td>
      </tr>

      <tr class="trb">
         <td class="name">修改</td > <td><button @click="send()">确认修改</button></td>
      </tr>
   </table>
   </div>
</template>

<style scoped>
   .name{   
      width: 10%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .content{
      width: 50%;
      
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }

</style>
